<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="the_div">
      <p>我是p标签</p>
      <h3>我是h3</h3>
      <h3>我是h3</h3>
      <h3>我是h3</h3>
      <a id="theA" href="#">我是一个a标签</a>
      <ul>
        <li>北京</li>
        <li>天津</li>
        <li>南京</li>
      </ul>
      <ol class="my_li">
        <li>大张</li>
        <li>大王</li>
        <li>大狗</li>
      </ol>
      <ul class="my_li">
        <li>小明</li>
        <li>小红</li>
        <li>小蓝</li>
      </ul>
    </div>
    <script>
      //练习1. 通过id获取到a标签
      const a = document.getElementById('theA')
      console.log(a)
      //练习2. 通过标签名 获取到所有h3标签, 并输出在控制台
      const h3 = document.getElementsByTagName('h3')
      console.log(h3)
      //练习3. 通过querySelectAll() 获取所有的li标签
      const li = document.querySelectorAll('li')
      console.log(li)
      //练习4. 通过querySelectAll() 获取所有小字开头的名字的li标签
      const small = document.querySelectorAll('ul.my_li li')
      console.log(small)
      //练习5. 给<li>小红</li> 内容改成小六，字体颜色变成红色
      const red = document.querySelector('ul.my_li li:nth-child(2)')
      red.innerText = '小六'
      red.style.color = 'red'
      console.log(red)
      //练习6. 给<li>天津</li> 添加类名，样式修改背景色老绿
      const green = document.querySelector('ul li:nth-child(2)')
      green.classList.add('green')
      green.style.backgroundColor = 'green'
      console.log(green)
    </script>
  </body>
</html>
